<template>
  <a-drawer
      :width="600"
      placement="right"
      :visible="visible"
      :after-visible-change="afterVisibleChange"
      @close="onClose"
      title="客服"
      class="form-drawer"
  >
    <a-form-model
        :model="menuForm"
        ref="menuForm"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        class="form-model"
    >
      <a-form-model-item label="应用场景：" prop="type">
        <a-radio-group v-model="menuForm.type">
          <a-radio value="app"> app </a-radio>
          <a-radio value="tl"> 投流 </a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="名称：" prop="name">
        <a-input v-model="menuForm.name" placeholder="请输入" allow-clear></a-input>
      </a-form-model-item>
      <a-form-model-item label="tg链接：" prop="tgUrl">
        <a-input v-model="menuForm.tgUrl" placeholder="请输入" allow-clear></a-input>
      </a-form-model-item>
      <a-form-model-item label="头像" prop="avatarLink">
        <upload-image v-model="menuForm.avatarLink"  uploadMode="manual" />
      </a-form-model-item>
      <a-form-model-item label="排序">
        <a-input v-model="menuForm.dataSort" placeholder="请输入" type="number" allow-clear></a-input>
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 18, offset: 3 }">
        <a-button type="primary" @click="menuSubmit" :loading="submitLoading">保存</a-button>
        <a-button @click="onClose">取消</a-button>
      </a-form-model-item>
    </a-form-model>
  </a-drawer>
</template>

<script>
import {CustomerServiceAdd, CustomeConfigDetails, CustomerServiceUpdate} from '@/api/short'
import UploadImage from '@/components/UploadImage/UploadImage'
export default {
  name: 'CustomerForm',
  data () {
    return {
      visible: false,
      menuForm: {
        hiddenValue: true,
        downloadurl: '',
        dataSort: 0,
        status: 1,
        type: 'app'
      },
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      rules: {
        newversion: [{ required: true, message: '版本号不能为空' }],
        content: [{ required: true, message: '更新内容不能为空' }],
        avatarLink: [{ required: true, message: '请上传头像' }],
        level: [{ required: true, message: '菜单级别不能为空' }],
        path: [{ required: true, message: '菜单URL不能为空' }]
      },
      parentList: [],
      submitLoading: false
    }
  },
  methods: {
    open (record = {}) {
      if (record.id) {
        this.getMenuInfo(record.id)
      }
      this.visible = true
    },
    onClose () {
      this.visible = false
    },
    afterVisibleChange (val) {
      // console.log('visible', val)
      // if (!val) {
      //   this.menuForm = {
      //     menuCode: '',
      //     menuName: '',
      //     path: '',
      //     orderNum: '0',
      //     parentId: '',
      //     hiddenValue: true,
      //     icon: ''
      //   }
      // }
      // this.getParentList()
    },
    getMenuInfo (id) {
      CustomeConfigDetails(id).then((res) => {
        res.data.hiddenValue = res.data.visible == 1
        res.data.parentId = res.data.parentId === 0 ? null : res.data.parentId
        this.menuForm = res.data
      })
    },
    menuSubmit () {
      this.menuForm.visible = this.menuForm.hiddenValue ? '1' : '0'
      this.$refs.menuForm.validate((valid) => {
        if (valid) {
          this.submitLoading = true
          if (this.menuForm.id) {
            CustomerServiceUpdate(this.menuForm).then(res => {
              this.$notification['success']({
                message: '提示',
                description: `编辑成功`
              })
              this.onClose()
              this.submitLoading = false
              this.$emit('on-submit')
            })
          }else {
            CustomerServiceAdd(this.menuForm).then(res => {
              this.$notification['success']({
                message: '提示',
                description: `新增成功`
              })
              this.onClose()
              this.submitLoading = false
              this.$emit('on-submit')
            })
          }
        }
      })
    }
  },
  components: {
    UploadImage
  }
}
</script>

<style></style>
